<template>
    <div v-show="this.$store.state.isShowAll">

      <h2>查询博客</h2>
      <el-form  :inline="true" >
        <el-form-item >
          <el-input v-model="searchData" placeholder="id/用户名/权限"></el-input>
        </el-form-item>

        <el-form-item >
          <el-button @click="searchBlog" type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData">
        <el-table-column label="文章id">
          <template slot-scope="scope">
            <i class="el-icon-user"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="文章名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.title }}</span>
          </template>
        </el-table-column>


        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="修改时间">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户名">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户id">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.userId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="tag">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tag }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="goUpdate(scope.row.id)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="removeBlog(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
</template>

<script>
    export default {
        name: "SearchBlog",
        data() {
          return {

 /*            <!--  "blog": {-->
<!--  "bigImgId": "1",-->
<!--  "title": "休闲鞋",-->
<!--  "tag": "1",-->
<!--  "id": 1,-->
<!--  "content": "休闲鞋",-->
<!--  "createTime": null,-->
<!--  "updateTime": "1",-->
<!--  "userId": 1-->
<!--  }--> */
            searchData:'',
            tableData: []
        }
      },
      methods: {

        searchBlog(){
          this.axios.defaults.withCredentials = true;
          this.axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
          let postData = {

            keyWord:this.searchData
          }
          this.axios.defaults.withCredentials = true;
          this.axios.defaults.headers.post["Content-Type"] =
              "application/json;charset=utf-8";
          this.axios.post('http://localhost:8080/Api/Blog/SearchBlog',JSON.stringify(postData)).then(
              response=>{

                if (!response.data.blogList)
                {
                  this.tableData=[]
                }else
                {
                  console.log(this.tableData)
                  this.tableData = response.data.blogList
                }


              },
              err=>{
                console.log(err)
              }
          )


        },
        goUpdate(id){
           this.$router.push({name:'UpdateBlog',params:{blogID:id}})
        },
        removeBlog(id){
          let url = 'http://localhost:8080/Api/Blog/RemoveBlog'
          let postData = {
            token:this.$store.state.userToken,
            id:id
          }
          this.axios.defaults.withCredentials = true;
          this.axios.defaults.headers.post["Content-Type"] =
              "application/json;charset=utf-8";
          this.axios.post(url,JSON.stringify(postData)).then(
              response=>{
                if (response.data.code === 'ok')
                {
                  this.$message.success('删除成功')
                  this.searchBlog()
                }
                else {
                  this.$message.warning('删除失败'+response.data.info)
                }
              },
              err=>{
                console.log(err)
              }

          )
        }
      },
    }
</script>

<style scoped>

h2{
  margin: 10px 20px;
}
  /* .el-table .el-table__cell{
    text-align: none !important;
  }
  .el-table th.el-table__cell>.cell{
    text-align: center !important;
  }
  .el-table .el-table__cell{
    text-align: center !important;
  } */
</style>